<template>
	<view class="popup" v-if="show && curShow">
		<view class="content">
			<view class="ball-box">
				<view class="ball left-ball">
					<view class="face">
						<view class="eye"></view>
						<view class="mouth"></view>
					</view>
				</view>
				<view class="ball right-ball">
					<view class="face">
						<view class="eye"></view>
						<view class="mouth"></view>
						<view class="kiss-mouth">
							<span></span>
							<span></span>
						</view>
					</view>
				</view>
			</view>
			<br />
			{{ ask[noNum] }}
		</view>

		<view class="btn" @click="doNo()">好的</view>
	</view>
</template>

<script>
export default {
	props: {
		show: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			curShow: true,
			noNum: 0,
			ask: [
				'小宝贝，情人节快乐吖~',
				'爱上你之前，想单枪匹马去闯荡江湖，看看这五彩斑斓的世界。爱上你之后，觉得江湖太远了，我不去了，我只想给你做饭，陪你睡觉。',
				'我说不出来为什么爱你，但我知道，你就是我不爱别人的理由。',
				'我行过许多地方的桥，看过许多次数的云，喝过许多种类的酒，却只爱过一个正当最好年龄的人。',
				'即使有一天，你的步履变得蹒跚，青丝变成白发，红润的脸上爬满了皱纹，但我仍然要携着你的手，漫步在夕阳的余晖下。',
				'宝贝，天下之大，大不过我对你的思念。',
				'你可以是我年少时的兵荒马乱，亦会是我共渡余生的白首良人。',
				'想把你偷偷藏起来，你只能是我一个人的喜欢，又在为数不多时候想把你展现给所有人，喏，这是我的。'
			]
		};
	},
	methods: {
		doNo() {
			if (this.noNum >= this.ask.length - 1) {
				this.$emit('end');
				return;
			}
			this.curShow = false;
			this.noNum++;
			setTimeout(() => {
				this.curShow = true;
			}, 10);
		}
	}
};
</script>

<style lang="scss" scoped>
@keyframes show-act {
	0% {
		transform: translate(-50%, -50%) scale(0.7);
	}
	50% {
		transform: translate(-50%, -50%) scale(1.15);
	}
	100% {
		transform: translate(-50%, -50%) scale(1);
	}
}

.popup {
	position: fixed;
	width: 80%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 300px;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 8px;
	font-size: 0;
	z-index: 999;
	animation: show-act 0.6s ease-in-out;
}

.popup .content {
	padding: 20px 12px;
	font-size: 16px;
	text-align: center;
}

.popup .btn {
	display: inline-block;
	width: 100%;
	font-size: 15px;
	line-height: 40px;
	text-align: center;
	border-top: 1px solid #ddd;
	cursor: pointer;
	transition: all 0.3s;
	border-radius: 0 0 8px 8px;
}

.popup .btn:hover {
	background: #eee;
}

.ball-box {
	font-size: 0;
}

.ball {
	position: relative;
	display: inline-block;
	width: 100px;
	height: 100px;
	background: rgba(255, 255, 255, 0.9);
	border: 6px solid #333;
	border-radius: 50%;
}

.left-ball {
	z-index: 1;
	animation: close 4s ease infinite;
}

.right-ball {
	animation: kiss 4s ease infinite;
}

.ball .face {
	position: absolute;
	height: 40%;
	top: 30%;
}

.left-ball .face {
	width: 80%;
	right: 0;
	animation: face 4s ease infinite;
}

.right-ball .face {
	width: 70%;
	left: 0;
}

.ball .face::before {
	content: '';
	position: absolute;
	background: #badc58;
	border-radius: 50%;
}

.left-ball .face::before {
	top: 50%;
	left: 0;
	width: 16px;
	height: 7px;
}

.right-ball .face::before {
	top: 50%;
	left: 4px;
	width: 10px;
	height: 10px;
}

.ball .face::after {
	content: '';
	position: absolute;
	background: #badc58;
	border-radius: 50%;
}

.left-ball .face::after {
	top: 50%;
	right: -6px;
	width: 16px;
	height: 7px;
}

.right-ball .face::after {
	top: 50%;
	right: -8px;
	width: 10px;
	height: 10px;
}

.ball .face .eye::before {
	content: '';
	position: absolute;
	border-radius: 50%;
}

.left-ball .face .eye::before {
	top: -4px;
	left: 8px;
	width: 15px;
	height: 18px;
	border-bottom: 5px solid #000;
}

.right-ball .face .eye::before {
	top: 3px;
	left: 10px;
	width: 15px;
	height: 15px;
	border-top: 5px solid #000;
}

.ball .face .eye::after {
	content: '';
	position: absolute;
	border-radius: 50%;
}

.left-ball .face .eye::after {
	top: -4px;
	right: 8px;
	width: 15px;
	height: 18px;
	border-bottom: 5px solid #000;
}

.right-ball .face .eye::after {
	top: 3px;
	right: -2px;
	width: 15px;
	height: 15px;
	border-top: 5px solid #000;
}

.left-ball .face .mouth {
	width: 26px;
	height: 20px;
	margin: 24% auto 0;
	border-bottom: 5px solid #000;
	border-radius: 50%;
}

.right-ball .face .mouth {
	width: 28px;
	height: 20px;
	margin: 28% auto 0 25px;
	border-bottom: 5px solid #000;
	border-radius: 50%;
	animation: mouth-m 4s ease infinite;
}

.kiss-mouth {
	position: absolute;
	left: 22px;
	top: 22px;
	opacity: 0;
	z-index: 2;
	animation: kiss-m 4s ease infinite;
}

.kiss-mouth span {
	display: block;
	width: 13px;
	height: 10px;
	background-color: white;
	border-radius: 50%;
	border-left: 5px solid;
}

@keyframes close {
	0% {
		transform: translate(0);
	}
	20% {
		transform: translate(20px);
	}
	35% {
		transform: translate(20px);
	}
	55% {
		transform: translate(0px);
	}
	100% {
		transform: translate(0px);
	}
}

@keyframes face {
	0% {
		transform: translate(0) rotate(0);
	}
	10% {
		transform: translate(0) rotate(0);
	}
	20% {
		transform: translate(8px) rotate(-2deg);
	}
	28% {
		transform: translate(0) rotate(0);
	}
	35% {
		transform: translate(8px) rotate(-2deg);
	}
	50% {
		transform: translate(0) rotate(0);
	}
	100% {
		transform: translate(0) rotate(0);
	}
}

@keyframes kiss {
	40% {
		transform: translate(0px);
	}
	50% {
		transform: translate(30px) rotate(20deg);
	}
	60% {
		transform: translate(-33px);
	}
	67% {
		transform: translate(-33px);
	}
	77% {
		transform: translate(0px);
	}
}

@keyframes mouth-m {
	0% {
		opacity: 1;
	}
	54.9% {
		opacity: 1;
	}
	55% {
		opacity: 0;
	}
	66% {
		opacity: 0;
	}
	66.1% {
		opacity: 1;
	}
}

@keyframes kiss-m {
	0% {
		opacity: 0;
	}
	55% {
		opacity: 0;
	}
	55.1% {
		opacity: 1;
	}
	66% {
		opacity: 1;
	}
	66.1% {
		opacity: 0;
	}
}
</style>
